<template>
  <div id="lang">
    <el-dropdown trigger="click" @command="toggleLang">
      <div>
        <svg-icon style="color: #fff; font-size:20px" icon-class="language" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          command="zh"
          :class="{ actvie: $root.$i18n.locale === 'zh' }"
        >中文</el-dropdown-item>
        <el-dropdown-item
          command="en"
          :class="{ actvie: $root.$i18n.locale === 'en' }"
        >English</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  name: 'Lang',
  data() {
    return {}
  },

  // 定义方法
  methods: {
    toggleLang(type) {
      this.$root.$i18n.locale = type
      Cookie.set('lang', type)
      this.$router.go(0)
    }
  }
}
</script>

<style scoped lang="scss">
.actvie {
  background-color: #ecf5ff;
  color: #66b1ff;
}
</style>
